import React from 'react';
import { motion } from 'framer-motion';

interface ElasticButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  className?: string;
  disabled?: boolean;
  whileTapScale?: number;
  whileHoverScale?: number;
}

const ElasticButton: React.FC<ElasticButtonProps> = ({ 
  children, 
  onClick,
  className = '',
  disabled = false,
  whileTapScale = 0.95,
  whileHoverScale = 1.05
}) => {
  return (
    <motion.button
      className={className}
      onClick={onClick}
      disabled={disabled}
      whileHover={{ scale: disabled ? 1 : whileHoverScale }}
      whileTap={{ scale: disabled ? 1 : whileTapScale }}
      transition={{ type: "spring", stiffness: 400, damping: 17 }}
      style={{
        cursor: disabled ? 'not-allowed' : 'pointer',
        opacity: disabled ? 0.6 : 1,
        ...(!className && {
          padding: '10px 20px',
          border: 'none',
          borderRadius: '6px',
          background: 'linear-gradient(135deg, #61dca3, #1890ff)',
          color: 'white',
          fontWeight: 'bold',
          fontSize: '14px'
        })
      }}
    >
      {children}
    </motion.button>
  );
};

export default ElasticButton;